<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>jQuery AutoComplete tutorial using multiple input boxes</title>

    <style type="text/css" title="currentStyle">
                @import "http://www.codemashups.com/source/jquery/jquery-autocomplete-p1/css/layout-styles.css";
                @import "http://www.codemashups.com/source/jquery/jquery-autocomplete-p1/css/themes/smoothness/jquery-ui-1.8.4.custom.css";
    </style>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <!-- jQuery libs -->
    <script  type="text/javascript" src="http://www.codemashups.com/source/jquery/jquery-autocomplete-p1/js/jquery-1.6.1.min.js"></script>
    <script  type="text/javascript" src="http://www.codemashups.com/source/jquery/jquery-autocomplete-p1/js/jquery-ui-1.8.14.custom.min.js"></script>

    <!-- Our jQuery Script to make everything work -->
    <script  type="text/javascript" >
    $(document).ready(function(){

        // Use the .autocomplete() method to compile the list based on input from user
        $('#itemCode').autocomplete({
            source: 'http://www.codemashups.com/source/jquery/jquery-autocomplete-p1/data/item-data.php',
            minLength: 1,
            select: function(event, ui) {
                var $itemrow = $(this).closest('tr');
                        // Populate the input fields from the returned values
                        $itemrow.find('#itemCode').val(ui.item.itemCode);
                        $itemrow.find('#itemDesc').val(ui.item.itemDesc);
                        $itemrow.find('#itemPrice').val(ui.item.itemPrice);

                        // Give focus to the next input field to recieve input from user
                        $('#itemQty').focus();

                return false;
    	    }
        // Format the list menu output of the autocomplete
        }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.itemCode + " - " + item.itemDesc + "</a>" )
                .appendTo( ul );
        };

        // Get the table object to use for adding a row at the end of the table
        var $itemsTable = $('#itemsTable');

        // Create an Array to for the table row. ** Just to make things a bit easier to read.
        var rowTemp = [
            '<tr class="item-row">',
                '<td><a id="deleteRow"><img src="images/icon-minus.png" alt="Remove Item" title="Remove Item"></a></td>',
                '<td><input name="itemCode[]" class="tInput" value="" id="itemCode" /> </td>',
                '<td><input name="itemDesc[]" class="tInput" value="" id="itemDesc"  readonly="readonly" /></td>',
                '<td><input name="itemQty[]" class="tInput" value="" id="itemQty" /></td>',
                '<td><input name="itemPrice[]" class="tInput" value="" id="itemPrice" /></td>',
            '</tr>'
        ].join('');

        // Add row to list and allow user to use autocomplete to find items.
        $("#addRow").bind('click',function(){

            var $row = $(rowTemp);

            // save reference to inputs within row
            var $itemCode 	        = $row.find('#itemCode');
            var $itemDesc 	        = $row.find('#itemDesc');
            var $itemPrice	        = $row.find('#itemPrice');
            var $itemQty	        = $row.find('#itemQty');

            if ( $('#itemCode:last').val() !== '' ) {

                // apply autocomplete widget to newly created row
                $row.find('#itemCode').autocomplete({
                    source: 'http://www.codemashups.com/source/jquery/jquery-autocomplete-p1/data/item-data.php',
                    minLength: 1,
                    select: function(event, ui) {
                        $itemCode.val(ui.item.itemCode);
                        $itemDesc.val(ui.item.itemDesc);
                        $itemPrice.val(ui.item.itemPrice);

                        // Give focus to the next input field to recieve input from user
                        $itemQty.focus();

                        return false;
                    }
                }).data( "autocomplete" )._renderItem = function( ul, item ) {
                    return $( "<li></li>" )
                        .data( "item.autocomplete", item )
                        .append( "<a>" + item.itemCode + " - " + item.itemDesc + "</a>" )
                        .appendTo( ul );
                };
                // Add row after the first row in table
                $('.item-row:last', $itemsTable).after($row);
                $($itemCode).focus();

            } // End if last itemCode input is empty
            return false;
        });

        $('#itemCode').focus(function(){
            window.onbeforeunload = function(){ return "You haven't saved your data.  Are you sure you want to leave this page without saving first?"; };
        });

    }); // End DOM

    	// Remove row when clicked
    	$("#deleteRow").live('click',function(){
    		$(this).parents('.item-row').remove();
            // Hide delete Icon if we only have one row in the list.
            if ($(".item-row").length < 2) $("#deleteRow").hide();
    	});

    </script>


</head>
<body>

<div id="container">

        <div class="panel">
            <div class="title-large">
                <div class="theme"></div>
            </div>

                <div class="content inpad">

                    <div id="messageBox" style="margin-left:15px; padding-left:20px; padding-bottom:5px; border:1px #ccc solid; display:none;"></div>

                            <form action="" id="itemsForm">

                                <table id="itemsTable" class="general-table">
                                    <thead>
                                    <tr>
                                        <th></th>
                                        <th>Item Code</th>
                                        <th>Item Description</th>
                                        <th>Item Qty</th>
                                        <th>Item Price</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="item-row">
                                            <td></td>
                                            <td><input name="itemCode[]" value="" class="tInput" id="itemCode" tabindex="1"/> </td>
                                            <td><input name="itemDesc[]" value="" class="tInput" id="itemDesc"  readonly="readonly" /></td>
                                            <td><input name="itemQty[]" value="" class="tInput" id="itemQty" tabindex="2"/></td>
                                            <td><input name="itemPrice[]" value="" class="tInput" id="itemPrice" readonly="readonly" /> </td>
                                        </tr>
                                    </tbody>
                                </table>

                            </form>

                            <a href="#" id="addRow" class="button-clean large"><span> <img src="images/icon-plus.png" alt="Add" title="Add Row" /> Add Item</span></a>

                        </div>
 
                    </form>

                </div>
        </div>

</body>
</html>